<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- {{title}} -->
        <!-- // 此时 child-a相当于是div#app的子组件 newVue({})根实例(根组件) -->

        <!-- 在使用组件child-a时给它props中的元素传值 -->
        <child-a msg="我是父组件的传过来的值"></child-a>

        <!-- <input  v-model="title"> -->
        <child-a msg="title"></child-a>
        <hr>
        <child-a :msg="title"></child-a>
		<child-a :msg="a"></child-a>
		
    </div>
    <script src='./vue.js'></script>
    <script>
        // 组件通信(传值)
        // 父->子 (props)
        // 子->父
        // 兄弟组件传值

        // 
        Vue.component('child-a', {
            template: `<div>{{msg}}</div>`,
            // 需求:希望msg的值来源于父组件
            // msg这个数据的声明就不能写在data中
            // 组件有个选项 props中的数据 就是用来接收父组件的值
            // props的值是[]或者{}
            // props中的prop的用法和data中的数据用法一样
            props: ['msg'],
            data() {
                return {
                    //msg: 'abc',
                }
            }
        });

        new Vue({
            el: '#app',
            data: {
                title: '我是父组件的值',
				a: 11
            },
            methods: {

            }
        });
    </script>
</body>